<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/createOrder.css">
    <script src="./js/common.js"></script>
    <script src="./js/vue.min.js"></script>
</head>

<body>
<div id="app">
    <header>
        <h3>创建订单</h3>
        <div class="select-user">
            <div class="divider-title">
                <div class="divider-lt"></div>
                <div class="title">选择用户</div>
                <div class="divider-rt"></div>
            </div>
            <div class="select-box">
                <span>用户名</span>
                <div class="custom-select">
                    <div class="select-box"><input type="text" v-model="selectUserItem.nickname"
                                                   @focus="showSelectOption = true" placeholder="请选择"></div>
                    <div class="options" v-if="showSelectOption">
                        <div class="option-item" v-for="item in userList" :key="item.id" @click="selectUser(item)">
                            {{item.nickname}} {{item.tiktokno}}
                        </div>
                    </div>
                </div>
                <span>余额 7177.64</span>
            </div>
        </div>
    </header>
    <main>
        <div class="left">
            <div class="divider-title">
                <div class="divider-lt"></div>
                <div class="title">用户橱窗</div>
                <div class="divider-rt"></div>
            </div>
            <table v-if="goodsList.length">
                <thead>
                <tr>
                    <th>商品名称</th>
                    <th>主图</th>
                    <th>成本</th>
                    <th>利润</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in goodsList" :key="item.id">
                    <td>{{item.name}}</td>
                    <td>
                        <img :src="item.img" alt="">
                    </td>
                    <td>{{item.original_price}}</td>
                    <td>{{item.profit}}</td>
                    <td><button @click="selectGoodsItem(item)">创建任务</button></td>
                </tr>
                </tbody>
            </table>
            <div class="empty-box" v-else>
                暂无数据
            </div>
            <ul class="pagination" v-if="goodsList.length">
                <li :class="{'active': page === pageItem}" v-for="pageItem in last_page" @click="getList"><a
                        href="#">{{pageItem}}</a></li>
            </ul>
        </div>
        <div class="right">
            <div class="divider-title">
                <div class="divider-lt"></div>
                <div class="title">当前选择</div>
                <div class="divider-rt"></div>
            </div>
            <div class="select-list">
                <div class="select-item" v-for="item in selectGoods" :key="item.id">
                    <img :src="item.img" alt="">
                    <div class="good-name">{{item.name}}</div>
                    <div class="good-num">
                        <input type="number" v-model="item.num">
                    </div>
                </div>
            </div>
        </div>
    </main>
<!-- <footer>
      <span>订单金额：{{computedPrice.price}}</span>
      <span>成本：{{computedPrice.cost}}</span>
      <button @click="createOrder">创建订单</button>
    </footer> -->
    <div class="dialog" v-if="dialogShow">
        <div class="dialog-content">
            <div class="dialog-title">
                自动操作执行任务
            </div>
            <div class="dialog-body">
                <div class="form-item">
                    <label>任务类型</label>
                    <select>
                        <option value="" disabled selected>Select your option</option>
                        <option value="hurr">Durr</option>
                    </select>
                </div>
                <div class="form-item">
                    <label>执行数量</label>
                    <input type="number" />
                </div>
                <div class="form-item">
                    <label>执行数量</label>
                    <input type="datetime-local" />
                </div>
                <div class="form-item">
                    <label>持续时长(分)</label>
                    <input type="number" />
                </div>
            </div>
            <div class="dialog-footer">
                <button class="confirm">确定</button>
                <button class="cancel" @click="dialogShow = false">取消</button>
            </div>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                userList: [],
                selectUserId: undefined,
                goodsList: [],
                showSelectOption: false,
                selectUserItem: {},
                last_page: 1,
                page: 1,
                selectGoods: [],
                dialogShow: false
            }
        },
        mounted() {
            this.getUser()
        },
        computed: {
            computedPrice() {
                const price = this.selectGoods.reduce((pre, cur) => {
                    return pre + cur.price * cur.num
                }, 0)
                // 成本
                const cost = this.selectGoods.reduce((pre, cur) => {
                    return pre + cur.original_price * cur.num
                }, 0)
                return {
                    price,
                    cost
                }
            }
        },
        watch: {
            selectUserId() {
                console.log(this.selectUserId);
                this.getGoodsByUserId(this.selectUserId)
            }
        },
        methods: {
            async getUser() {
                const res = await request('/api/v1/getuser', 'get', {
                    agent_id: 0,
                    key: 9,
                    page: 1,
                    limit: 1000
                })
                this.userList = res.data.list
            },
            getList() {
                this.page++;
                this.getGoodsByUserId(this.selectUserId)
            },
            async getGoodsByUserId(id) {
                const res = await request('/api/v1/user/shopwindow', 'get', {
                    user_id: id,
                    page: this.page,
                    limit: 10
                })
                this.goodsList = res.data.list
                this.last_page = res.data.paginate.last_page;
            },
            selectUser(item) {
                this.selectUserItem = item;
                this.selectUserId = item.id
                this.showSelectOption = false;
            },
            selectGoodsItem(item) {
                console.log(this.selectGoods.some(v => v.id === item.id));
                if (this.selectGoods.some(v => v.id === item.id)) {
                    this.selectGoods.forEach(f => {
                        if (f.id === item.id) {
                            f.num++
                        }
                    })
                } else {
                    const formatItem = { ...item, num: 1 }
                    this.selectGoods.push(formatItem)
                }
                console.log(this.selectGoods);
            },
            async createOrder() {
                const carts = this.selectGoods.map(v => {
                    return {
                        goods_id: v.id,
                        number: v.num
                    }
                })
                const res = await request('/api/v1/goodsorder/create', 'post', {
                    user_id: this.selectUserId,
                    carts
                })

                toast('操作成功')
            }
        }
    })
</script>
</body>

</html>
